import React, { useState } from "react";
import { useNavigate } from "react-router-dom";
import { NavBar } from 'antd-mobile';
import { Image, Button, Space } from 'antd';
import { useLocation } from "react-router-dom";
import { RotateRightOutlined } from '@ant-design/icons';
import imges from './img/images'
// // 图片资源 - 根据实际情况修改路径
// const imges = {
//   img7: require('./images/health-cert-1.jpg'), // 本地图片
//   img8: require('./images/business-license.jpg'),
//   img9: require('./images/food-license.jpg'),
//   fallback: require('./images/image-fallback.png') // 回退图片
// };

const Ingredient = () => {
  const navigate = useNavigate();
  const back = () => navigate(-1);
  const location = useLocation();
  
  // 添加安全的默认值处理
  const { itemD = {} } = location.state || {};
  
  // 调试日志
  console.log('当前图片资源:', imges);
  console.log('路由状态数据:', itemD);

  // 图片分组数据
  const imageGroups = {
    healthCert: [
      { src: imges.img7 || imges.fallback, alt: '健康证1' },
      { src: imges.img7 || imges.fallback, alt: '健康证2' }
    ],
    businessLicense: [
      { src: imges.img8 || imges.fallback, alt: '营业执照' }
    ],
    foodLicense: [
      { src: imges.img9 || imges.fallback, alt: '食品经营许可证' }
    ]
  };
  
  // 图片旋转状态
  const [rotationMap, setRotationMap] = useState({});

  // 旋转图片函数
  const rotateImage = (imgSrc) => {
    setRotationMap(prev => ({
      ...prev,
      [imgSrc]: ((prev[imgSrc] || 0) + 90) % 360
    }));
  };

  // 自定义预览工具栏
  const customPreviewToolbar = (originalToolbar, { image }) => {
    return (
      <div style={{
        display: 'flex',
        alignItems: 'center',
        background: 'rgba(0, 0, 0, 0.7)',
        padding: '8px 16px',
        borderRadius: '8px',
        marginBottom: '20px'
      }}>
        {originalToolbar}
        <Space style={{ marginLeft: 'auto' }}>
          <Button
            icon={<RotateRightOutlined />}
            type="text"
            style={{ color: 'white' }}
            onClick={(e) => {
              e.stopPropagation();
              rotateImage(image.src);
            }}
          >
            旋转
          </Button>
        </Space>
      </div>
    );
  };

  // 图片渲染函数
  const renderImageWithRotation = (image) => ({
    ...image,
    render: (imgNode) => (
      <div style={{
        transform: `rotate(${rotationMap[image.src] || 0}deg)`,
        transition: 'transform 0.3s ease',
        display: 'flex',
        justifyContent: 'center',
        alignItems: 'center',
        height: '100%'
      }}>
        {imgNode}
      </div>
    )
  });

  return (
    <div style={{ 
      background: "#f5f5f5", 
      minHeight: '100vh',
      paddingBottom: '20px'
    }}>
      {/* 导航栏 */}
      <NavBar 
        onBack={back}
        style={{
          background: 'white',
          boxShadow: '0 2px 8px rgba(0, 0, 0, 0.1)'
        }}
      >
        食材供应商详情
      </NavBar>

      {/* 基本信息卡片 */}
      <div style={{
        margin: '16px',
        padding: '16px',
        background: 'white',
        borderRadius: '8px',
        boxShadow: '0 1px 3px rgba(0, 0, 0, 0.1)'
      }}>
        <h3 style={{ 
          color: "#1890ff",
          borderBottom: '1px solid #f0f0f0',
          paddingBottom: '8px',
          marginBottom: '16px'
        }}>
          基本信息
        </h3>
        
        <div style={{ lineHeight: '28px' }}>
          <p><strong>供应商名称:</strong> {itemD?.name || '暂无数据'}</p>
          <p><strong>供应商地址:</strong> {itemD?.address || '暂无数据'}</p>
          <p><strong>负责人:</strong> {itemD?.prople || '暂无数据'}</p>
          <p><strong>联系电话:</strong> {itemD?.tel || '暂无数据'}</p>
          {itemD?.flloer && <p><strong>备注:</strong> {itemD.flloer}</p>}
        </div>
      </div>

      {/* 人员健康证 */}
      <div style={{
        margin: '16px',
        padding: '16px',
        background: 'white',
        borderRadius: '8px',
        boxShadow: '0 1px 3px rgba(0, 0, 0, 0.1)'
      }}>
        <h3 style={{ 
          color: "#1890ff",
          borderBottom: '1px solid #f0f0f0',
          paddingBottom: '8px',
          marginBottom: '16px'
        }}>
          人员健康证
        </h3>
        
        <Image.PreviewGroup
          preview={{
            toolbarRender: customPreviewToolbar,
            imageRender: renderImageWithRotation
          }}
        >
          <div style={{
            display: 'flex',
            justifyContent: 'space-around',
            flexWrap: 'wrap',
            gap: '16px'
          }}>
            {imageGroups.healthCert.map((img, index) => (
              <Image
                key={`health-${index}`}
                src={img.src}
                alt={img.alt}
                width={160}
                height={120}
                style={{
                  borderRadius: '4px',
                  objectFit: 'cover',
                  boxShadow: '0 2px 6px rgba(0, 0, 0, 0.1)'
                }}
                placeholder={
                  <div style={{
                    width: '100%',
                    height: '100%',
                    display: 'flex',
                    justifyContent: 'center',
                    alignItems: 'center',
                    background: '#fafafa',
                    color: '#999'
                  }}>
                    图片加载中...
                  </div>
                }
                fallback={imges.fallback}
                preview={{
                  mask: '点击查看',
                  maskClassName: 'custom-mask-style'
                }}
              />
            ))}
          </div>
        </Image.PreviewGroup>
      </div>

      {/* 营业执照 */}
      <div style={{
        margin: '16px',
        padding: '16px',
        background: 'white',
        borderRadius: '8px',
        boxShadow: '0 1px 3px rgba(0, 0, 0, 0.1)'
      }}>
        <h3 style={{ 
          color: "#1890ff",
          borderBottom: '1px solid #f0f0f0',
          paddingBottom: '8px',
          marginBottom: '16px'
        }}>
          营业执照
        </h3>
        
        <Image.PreviewGroup
          preview={{
            toolbarRender: customPreviewToolbar,
            imageRender: renderImageWithRotation
          }}
        >
          <div style={{ textAlign: 'center' }}>
            <Image
              src={imageGroups.businessLicense[0].src}
              alt={imageGroups.businessLicense[0].alt}
              width="100%"
              style={{
                maxWidth: '400px',
                borderRadius: '4px',
                margin: '0 auto'
              }}
              fallback={imges.fallback}
              preview={{
                mask: '点击查看大图',
                maskStyle: {
                  fontSize: '16px',
                  background: 'rgba(0, 0, 0, 0.5)'
                }
              }}
            />
          </div>
        </Image.PreviewGroup>
      </div>

      {/* 食品经营许可证 */}
      <div style={{
        margin: '16px',
        padding: '16px',
        background: 'white',
        borderRadius: '8px',
        boxShadow: '0 1px 3px rgba(0, 0, 0, 0.1)'
      }}>
        <h3 style={{ 
          color: "#1890ff",
          borderBottom: '1px solid #f0f0f0',
          paddingBottom: '8px',
          marginBottom: '16px'
        }}>
          食品经营许可证
        </h3>
        
        <Image.PreviewGroup
          preview={{
            toolbarRender: customPreviewToolbar,
            imageRender: renderImageWithRotation
          }}
        >
          <div style={{ textAlign: 'center' }}>
            <Image
              src={imageGroups.foodLicense[0].src}
              alt={imageGroups.foodLicense[0].alt}
              width="100%"
              style={{
                maxWidth: '400px',
                borderRadius: '4px',
                margin: '0 auto'
              }}
              fallback={imges.fallback}
              preview={{
                mask: '点击查看大图'
              }}
            />
          </div>
        </Image.PreviewGroup>
      </div>

      {/* 全局样式 */}
      <style>{`
        .custom-mask-style {
          display: flex;
          justify-content: center;
          align-items: center;
          font-size: 16px;
          color: white;
          background: rgba(0, 0, 0, 0.5);
          border-radius: 4px;
        }
        .ant-image-mask:hover .custom-mask-style {
          background: rgba(0, 0, 0, 0.7);
        }
      `}</style>
    </div>
  );
};

export default Ingredient;
